<template>
  <div>
    <Loading v-if="false"></Loading>
    <div id="bigVideo" v-if="movieShow" style="width: 100%" >
      <el-button id="close"  @click="movieShow=false;listShow=true">关闭</el-button>
      <video autoplay id="video" style="width: 100%"  width="90%" height="440" controls>

        <source :src="movie" type="video/mp4">
      </video>
    </div>

    <div v-if="!loading">

      <el-dialog
          title="更换标题"
          :visible.sync="upTitleVisible"
          width="30%"
          :before-close="handleClose">
        <el-input maxlength="18"  show-word-limit v-model="newTitle" placeholder="请输入新标题"></el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="upTitleVisible= false">取 消</el-button>
    <el-button type="primary" @click="upTitle()">确 定</el-button>
  </span>
      </el-dialog>
      <el-dialog style="width: 60%;margin: 0 auto" title="封面更换" :visible.sync="upCoverVisible">
        <el-upload
            name="multipartFiles"
            accept=".png,.gif,.jpg,.jpeg"
            :headers="header"
            :limit="1"
            :data="upCover"
            ref="upload"
            class="upload-demo"
            :auto-upload="true"
            :on-error="fail"
            :on-success="success"
            drag
            :action="baseUrl+'/admin/upCover'"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传png/jpg/jpeg文件，且不超过500MB</div>
        </el-upload>

        <div slot="footer" class="dialog-footer">
          <el-button @click="upCoverVisible = false">取 消</el-button>
          <el-button type="primary" @click="upCoverVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <div id="main" v-if="listShow">
        <el-input size="mini" placeholder="搜索企业" style="width: 40%" v-model="search" @keyup.enter.native="searchCompany"> </el-input>
        <br><br><br>
        <div id="videoBox" style="position: relative"  v-for="(item,key,index) in videoList" :key="item">

          <img id="coverImg" @click="openPlayer(item.id)" :src="getImg(item.id)" alt="">
          <div style="position: absolute;background-color:#fff;top: 0">
            {{getCompanyName(item.cid)}}
          </div>
          <div id="content">
            <div id="title">
              <p style="line-height:20px;margin-top:8px">{{item.title}}</p>
            </div>
            <p style="color:rgb(156,163,171);line-height:20px;font-size:15px;margin-top:8px">
              <span style="margin-left: 20px"><i class="el-icon-video-play"></i>{{item.accessNum}}</span>
              &nbsp;&nbsp;&nbsp;<span style="float: left"><i class="el-icon-date"></i>{{getTime(item.createTime)}}</span></p>
          </div>


          <div id="Features">
            <el-tooltip class="item" effect="dark" content="编辑标题" placement="bottom">
              <i @click="openUpTitle(item.id)" class="el-icon-edit"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="更换封面" placement="bottom">
              <i @click="openUpCover(item.id)" class="el-icon-s-management"></i>
            </el-tooltip>
            <el-tooltip  class="item" effect="dark" content="删除" placement="bottom">
              <i @click="deleteVideo(item.id,index)" class="el-icon-delete"></i>
            </el-tooltip>
          </div>



        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {getCompanyVideo, upTitle, delVideo, player, getOpenPlayer} from "../../network/admin";
import Loading from "../../components/common/Loading"
import {Message} from 'element-ui'
import {baseUrl} from "../../network/baseUrl";

export default {
  name: "StudyVideoList",
  components: {Loading},
  data() {
    return {
      search:'',
      companyMap:{},
      baseUrl:baseUrl(),
      movie:'',
      movieShow:false,
      listShow:true,
      header:{
        TOKEN:localStorage.getItem("TOKEN")
      },
      loading:true,
      upTitleVisible: false,
      upCoverVisible:false,
      upTitleId:'',
      newTitle:'',
      coverImg:[],
      upCover:{
        id:''
      },
      features:false,
      map:[],
      videoList:[
      ]
    };
  },
  created() {
    this.getVideos()
  },
  methods:{
    searchCompany(){
      getCompanyVideo(this.search)
      .then(res=>{
        this.loading=false
        this.videoList=res.data.extend.videoMap
        this.map=res.data.extend.imgMap
        this.companyMap=res.data.extend.companyMap
      })
    },
    openPlayer(id){
      getOpenPlayer(id).then(res=>{
        this.movie=baseUrl()+'/data/openData?str='+res.data.extend.address
        this.movieShow=true
        this.listShow=false
      })

    },
    getVideos(){
      getCompanyVideo('')
          .then(res=>{
            console.log(res)
            this.loading=false
            this.listShow=true
            this.videoList=res.data.extend.videoMap
            this.map=res.data.extend.imgMap
            this.companyMap=res.data.extend.companyMap
          })
    },
    getCompanyName(cid){
      return this.companyMap[cid].companyName
    },
    deleteVideo(id){
      delVideo(id)
          .then(res=>{
            console.log(res)
            Message.warning(res.data.extend.msg)
            // this.videoList.splice(index,1)
            this.getVideos()
          })
    },
    openUpTitle(id){
      this.upTitleVisible=true
      this.upTitleId=id
    },
    upTitle(){
      upTitle(this.upTitleId,this.newTitle)
          .then(res=>{
            Message.warning(res.data.extend.msg)
            this.upTitleVisible=false
            this.getVideos()
          })
    },
    success(){
      Message.success("修改成功!");
      this.upCoverVisible=false;
      this.$refs.upload.clearFiles()
      this.getVideos()

    },
    fail(){
      Message.error("上传失败!")
    },
    openUpCover(id){
      this.upCoverVisible=true
      this.upCover.id=id
      this.coverImg=[]
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    getTime(time){
      let dt=new Date(time)
      return (
          dt.getFullYear() +
          "-" +
          (dt.getMonth() + 1) +
          "-" +
          dt.getDate()
      );
    },
    getImg(id){
      let url=this.map[id]
      if(url==0||url==2||url==1){
        if (url==0)
          return require('../../assets/img/tab1.jpg')
        else if(url==1)
          return require('../../assets/img/tab2.jpg')
        else
          return require('../../assets/img/tab3.jpg')
      }else{
        return 'data:image/png;base64,'+url
      }
    },

  },

  computed:{

  }

};
</script>

<style scoped>

#videoBox{
  width: 200px;
  height: 210px;
  border: 1px rgb(229,233,239) solid;
  float: left;
  border-radius: 5px;
  margin-right: 42px;
  margin-bottom: 40px;
  cursor: pointer;

}
@keyframes features {
  0%{
    transform: translate(-60px);
    opacity: .1;
  }
  100%{
    transform: translate(0px);
    opacity: 1;
  }
}
#videoBox:hover #Features{
  display: block;

}
#coverImg{
  width: 100%;
  height: 60%;
}
#title{
  height: 40px;
  line-height: 20px;
  word-break:break-all;
}
#content{
  box-sizing: border-box;
  padding: 0px 10px;
  height: 80px;
}
#Features{
  display: none;
  animation: features .1s ease-out forwards;
}
#Features i{
  height: 20px;
  line-height: 20px;
  border-radius: 2px;
  width: 66.6667px;
  text-align: center ;
  background-color: rgba(0,0,0,.2);
  transition: all .3s;
}
#Features i:hover{
  background-color: #f1e6e6;
}
#Features i:hover{

}
#video{
  outline: none;
  height: 550px;
}
#bigVideo{
  background-color: #000;
  height: 100%;
}
#close{
  background-color: #000;
  outline: none;
  border: none;
  color: white;
  font-weight: 600;
}
</style>
